<template>
  <div class="page-main">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>  </template>
        <charts-line-col style="height: 400px" :line_x="state.line_col_x"></charts-line-col>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <span class="title-span"
      >2023-01至2023-02日间手术三、四级手术占比</span
      >
      <el-divider />
      <el-col :span="24">
        <el-table :data="tableData"    :summary-method="getSummaries"
                  show-summary style="width: 100%">
          <el-table-column prop="date" label="统计日期"   />
          <el-table-column prop="value_1" label="三、四级手术完成量"  />
          <el-table-column prop="value_2" label="一、二级手术完成量" />
          <el-table-column prop="value_3" label="日间手术三、四级手术占比" >
            <template #default="scope">
<span>{{scope.row.value_3}}%</span>
           </template>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="level">
import ChartsLineCol from '/@/components/charts/line_col.vue';
const state = reactive({
  line_col_x: ['2022-09','2022-10','2022-11','2023-01','2023-02','2023-03'],
});
const tableData = ref([
  {
    date: '2023-01-31',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-01',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-02',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-03',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-04',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-05',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-06',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-07',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-08',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-09',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-10',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-11',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-12',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-13',
    value_1: 120,
    value_2: 132,
    value_3: '5'},
  {
    date: '2023-02-14',
    value_1: 120,
    value_2: 132,
    value_3: '5'},]
);

const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '区间统计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}
</script>

<style lang="scss" scoped>
.title-span{
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}
</style>
